<template>
  <el-row class="container">
    <el-col :span="2">
      <el-row><label class="el-form-item__label">固</label></el-row>
      <el-row><label class="el-form-item__label">定</label></el-row>
    </el-col>
    <el-col :span="8" class="ps">
      <table cellspacing="0">
        <tr>
          <td>
            <el-input v-model="position.topLeft" size="small" maxlength="8" placeholder="0" @input="inputChange">
              <template slot="suffix">{{ topLeftCount }}/8</template>
            </el-input>
          </td>
          <td><el-input v-model="position.topRight" size="small" maxlength="8" placeholder="0" @input="inputChange">
            <template slot="suffix">{{ topRightCount }}/8</template>
          </el-input>
          </td>
        </tr>
        <tr>
          <td><el-input v-model="position.bottomLeft" size="small" maxlength="8" placeholder="0" @input="inputChange">
            <template slot="suffix">{{ bottomLeftCount }}/8</template>
          </el-input></td>
          <td><el-input v-model="position.bottomRight" size="small" maxlength="8" placeholder="0" @input="inputChange">
            <template slot="suffix">{{ bottomRightCount }}/8</template>
          </el-input></td>
        </tr>
      </table>

    </el-col>
    <el-col :span="14">
      <el-form ref="posForm" :model="position" :rules="rules" size="small" label-width="100px">
        <el-form-item label="产品" prop="productId">
          <el-select v-model="position.productId" style="width:100%" size="small" filterable placeholder="请选择">
            <el-option
              v-for="(item,i) in products"
              :key="i"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model="position.price" type="number" size="small" />
        </el-form-item>
        <el-form-item label="数量">
          <el-row>
            <el-col :span="12">
              <el-input v-model="sumCount" size="small" />
            </el-col>
            <el-col :span="12">
              <label class="el-form-item__label" style="margin-left:5px;">小计：</label><span style="color:#f00">{{ sumCount*position.price }}</span>
            </el-col>
          </el-row>

        </el-form-item>
      </el-form>
    </el-col>
    <el-button type="danger" icon="el-icon-close" class="btnClose" size="mini" circle @click="removePosition" />
  </el-row>
</template>
<script>
import { getAllList } from '@/api/product'
export default {
  props: ['position', 'index'],
  data() {
    return {
      // position: {
      //   topLeft: '',
      //   topRight: '',
      //   bottomLeft: '',
      //   bottomRight: '',
      //   productId: '',
      //   price: 0,
      //   count: 0,
      //   sumPrice: 0
      // },
      products: [],
      rules: {
        productId: [
          { required: true, message: '请选择产品', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入单价', trigger: 'blur' }
          // { type: 'number', message: '单价必须为数字', trigger: 'blur', required: true }
          // 应该增加一个单价>0的自定义验证
        ]
      }
    }
  },
  computed: {
    topLeftCount() {
      return this.getIntLength(this.position.topLeft)
    },
    topRightCount() {
      return this.getIntLength(this.position.topRight)
    },
    bottomLeftCount() {
      return this.getIntLength(this.position.bottomLeft)
    },
    bottomRightCount() {
      return this.getIntLength(this.position.bottomRight)
    },
    sumCount() {
      return this.topLeftCount + this.topRightCount + this.bottomLeftCount + this.bottomRightCount
    }
  },
  created() {
    this.getProducts()
  },
  methods: {
    // 计算整数的位数
    getIntLength(num) {
      let length = 0
      while (num >= 1) {
        num = num / 10
        length++
      }
      return length
    },
    getProducts() { // 获取产品
      getAllList().then(res => {
        this.products = res.data
      })
    },

    inputChange(val) { // 输入牙位
      if (isNaN(val)) {
        this.$message('位置输入错误！')
        return
      }
    },
    removePosition() { // 移除
      this.$emit('remove')
    },
    validate() { // 表单验证
      let rst = null
      this.$refs.posForm.validate((valid) => {
        rst = valid
      })
      return rst
    }
  }
}
</script>
<style scoped>
.container{
   border: 1px solid #DCDFE6;
   padding: 5px;
   border-radius: 4px;
   position: relative;
}

.btnClose{
  position: absolute;
  right: -10px;
  top:-10px;
}

.ps td{
    padding: 5px;
}
.ps table tr:first-of-type>td{
    border-bottom: 1px solid #DCDFE6;
}
.ps td:first-of-type{
    border-right: 1px solid #DCDFE6;
}

</style>
